<template>
    <Transition>
        <div v-if="ShowDialog">
            <div class="dialog">
                <div class="title">感谢反馈，您的评价是我进步的动力！</div>
                <div class="option">
                    <div class="row">
                        <label>
                            <input type="radio" v-model="feedback" :value=-1  @change="onCheck">
                            <span class="text">回答模糊，不能解决问题</span>
                        </label>
                    </div>
                    <div class="row">
                        <label>
                            <input type="radio" v-model="feedback" :value=-2  @change="onCheck">
                            <span class="text">回答错误，严重偏离</span>
                        </label>
                    </div>
                    <div class="row">
                        <label>
                            <input type="radio" v-model="feedback" :value=-3  @change="onCheck">
                            <span class="text">其他</span>
                        </label>
                    </div>
                    <textarea ref="isTextarea" v-model.trim="comment" @input="onInput" class="textarea" placeholder="请输入内容，仅限 50 字以内" maxlength='50'></textarea>
                    <div class="tips"> {{ textareaTips }}</div>
                </div>
                <button class="btn" @click="submit">提交</button>
                <span class="iconfont close icon-guanbi" @click="close"></span>
            </div>
            <div class="mask" ></div>
        </div>
    </Transition>
</template>

<script setup>
import { ref,watch,getCurrentInstance} from 'vue'
import {getFeedbackMessage} from '@/utils/api.js'
import {ElMessage} from "element-plus";
const emit = defineEmits(['closeDialog','winCloseDialog'])
const props = defineProps({
    ShowDialog: Boolean,
    treadData:Object
})
const isTextarea = ref()
const textareaTips = ref('')
const feedback = ref(0)
const comment = ref('')

function onCheck(e){
    if(e.target.value === '-3'){
        isTextarea.value.focus()
        let value = comment.value
        if(!value){
            textareaTips.value = '请输入内容'
        }else{
            textareaTips.value = ''
        }
    }else {
        textareaTips.value = ''
        comment.value = ''
    }
}
// 判断在输入框输入
function onInput(){
    if(comment.value){
        feedback.value = -3
    }else {
        textareaTips.value = '请输入内容'
    }
}
// 提交  Gpt内容反馈
function submit(){
    if(feedback.value === ''){
        ElMessage({
            message: '请先选择',
            type: 'warning',
            grouping: true,
        })
        return
    }
    if(feedback.value === -3 && comment.value === ''){
        ElMessage({
            message: '请先填写完评价信息再提交',
            type: 'warning',
            grouping: true,
        })
        return
    }
    const {messageId} = props.treadData
    let obj = {messageId,feedback:feedback.value}
    if(feedback.value === -3){ obj.comment=comment.value }
    getFeedbackMessage(obj).then(v =>{
        if(v.c === '100'){
            let Obj = props.treadData
            emit('winCloseDialog',Obj)
        }else {
            close()
        }
    }).catch(e =>{
        close()
    })
    feedback.value = 0
    comment.value = ''

}
// 关闭  Gpt内容反馈
function close(){
    emit('closeDialog',false)
    feedback.value = 0
    comment.value = ''
    textareaTips.value = ''
}

watch(()=>comment.value,(v)=>{
    if(v){
        textareaTips.value = ''
    }
})
</script>

<style scoped lang="scss">

//.v-enter-active, .v-leave-active {
//  transition: opacity 0.1s ease;
//}
//
//.v-enter-from, .v-leave-to {
//  opacity: 0;
//}

.mask {
  position: fixed;
  z-index: 2;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 560px;
  height: 670px;
  border-radius: 30px;
  background: linear-gradient(222deg, #DEFFF1 1%, #FFFFFF 47%, #E7F1FF 100%);
  padding: 60px 40px 40px;
  z-index: 3;
  box-sizing: border-box;
  text-align: center;
  .title{
    height: 40px;
    line-height:40px;
    font-size: 28px;
    font-weight: 700;
    font-family: Regular,sans-serif;
    color: #3D3D3D;
  }
  .option{
      display: flex;
      flex-direction: column;
      gap: 24px 0;
      margin-top: 30px;
      .row{
          height: 40px;
          display: flex;
          align-items: center;
          //vertical-align: center;
          input{
              display: inline-block;
              width: 30px;
              height: 30px;
              border-radius: 4px;
              border: 1px solid #E5E5E5;
              &:checked{

              }
              &::after{
                  content: "";
                  display: block;
                  width: 7px;
                  height: 7px;
                  background: lightblue;
                  margin-left: 2.5px;
                  margin-top: 2.5px;
                  border-radius: 50%;
              }
          }
          span{
              display: inline-block;
              vertical-align:middle;
              margin-top:2px;
              margin-bottom:1px;
              margin-left: 20px;
              font-size: 26px;
              color: #3D3D3D;
              font-family: Regular,sans-serif;
          }
      }
      .textarea{
          margin-top: 6px;
          width: 480px;
          height: 150px;
          border-radius: 10px;
          border: 1px solid #E5E5E5;
          padding:  13px 18px;
          box-sizing: border-box;
          font-size: 26px;
          font-family: Regular,sans-serif;
          outline: none;
          resize: none;
      }
      .tips{
          height: 1em;
          font-size: 24px;
          font-weight: 400;
          font-family: Regular,sans-serif;
          color: #D61F1F;
          text-align: left;
          margin-left: 20px;
          margin-top: -10px;
      }
  }
  .btn{
      margin: 30px auto 0;
      width: 400px;
      height: 88px;
      border-radius: 50px;
      background: #197CFD;
      font-family: Regular,sans-serif;
      font-size: 28px;
      color: #fff;
  }
  .close{
      position: absolute;
      bottom: -120px;
      left: 50%;
      transform: translate(-50%,0);
      color: #CBCBCB;
      font-size: 36px;
  }
}
</style>